<template>
    <div>
        <!-- <div class="item_title pr">
            {{$route.query.type == 1?'新增项目案例':'编辑项目案例'}}
        </div> -->
        <!-- <div class="padding_16"> -->
            <el-form ref="form" :rules="formrules" :model="form" label-width="100px">
                <el-form-item label="项目名称：" prop="cp_name">
                    <el-input v-model="form.cp_name" placeholder="请输入项目名称"></el-input>
                </el-form-item>
                <el-form-item label="项目周期：" prop="cp_cycle">
                    <el-select v-model="form.cp_cycle" placeholder="请选择" style="width: 100%;">
                        <el-option v-for="(item,index) in cycleOpt" :key="index" :label="item.st_name" :value="item.st_id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="担任角色：" prop="cp_role_arr">
                    <el-select v-model="form.cp_role_arr" multiple placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in workOpt" :key="item.st_id" :label="item.st_name" :value="item.st_id.toString()">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="应用技术：" prop="cp_technology_arr">
                    <el-select v-model="form.cp_technology_arr" multiple placeholder="请选择一项或多项技能" style="width: 100%;">
                        <el-option v-for="item in skillOpt" :key="item.st_id" :label="item.st_name" :value="item.st_id.toString()">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目简介：" prop="cp_content">
                    <quill-editor v-model="form.cp_content" ref="myQuillEditor" :options="editorOption" placeholder="请输入需求描述，最多不超过8000字">
                    </quill-editor>
                </el-form-item>
                <h2 class="other-info">其他信息</h2>
                <el-form-item label="演示地址：">
                    <el-input v-model="form.cp_look_address" placeholder="例如：http://域名/页面访问地址"></el-input>
                </el-form-item>
                <el-form-item label="项目截图：">
                    <el-upload ref="upload" :action="uploadUrl()" list-type="picture-card" multiple :limit="8" :http-request="uploadSectionFile" :on-remove="handleRemove" :on-change="uploadChange" :on-success="uploadSuccess" :file-list="filelist">
                        <i class="el-icon-plus" style="line-height: 190px;"></i>
                    </el-upload>
                    <div style="color: rgb(72, 87, 106);">项目截图最多可上传 8 张, 单张图片文件不超过 3 MB</div>
                </el-form-item>
                <div class="mt-30" style="text-align: center;">
                    <el-button type="primary" @click="onSubmit('form')" class="btn_200">保存</el-button>
                    <router-link to="/itemcase"><el-button class="btn_200">取消</el-button></router-link>
                </div>

            </el-form>
        <!-- </div> -->
    </div>
</template>
<script>

    export default {
        data(){
            return{
                listData: {},
                detailData: {},
                listIsZero: false,
                form: {
                    'cp_name': '',
                    'cp_cycle': '',
                    'cp_role': '',
                    'cp_role_arr': [],
                    'cp_technology': '',
                    'cp_technology_arr': [],
                    'cp_content': '',
                    'cp_look_address': '',
                    'cp_photo': '',
                },
                formrules: {
                    cp_name: [
                        { required: true, message: '请输入项目名称', trigger: 'blur' }
                    ],
                    cp_role_arr: [
                        { required: true, message: '请选择您所担任的角色', trigger: 'change' }
                    ],
                    cp_content: [
                        { required: true, message: '请输入项目简介', trigger: 'blur' }
                    ],
                },
                cycleOpt: [
                    {'st_id': 1, 'st_name': '10天以下'},
                    {'st_id': 2, 'st_name': '10-30天'},
                    {'st_id': 3, 'st_name': '1-3个月'},
                    {'st_id': 4, 'st_name': '3-6个月'},
                    {'st_id': 5, 'st_name': '6-12个月'},
                    {'st_id': 6, 'st_name': '一年及以上'},
                ],
                skillOpt: [],
                workOpt: [],
                editorOption: {
                    // placeholder设置提示词
                    placeholder: '请输入正文......',
                    // modules设置工具栏
                    modules: {
                        toolbar: [
                            [{ header: 1 }], // 1 级标题
                            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
                            ["blockquote"], // 引用 
                            // [{ script: "sub" }, { script: "super" }], // 上标/下标
                            ["link", "image"], // 链接、图片
                            [{ indent: "-1" }, { indent: "+1" }], // 缩进
                            // [{'direction': 'rtl'}],                         // 文本方向
                            // [{ size: ["small", false, "large", "huge"] }], // 字体大小
                            // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                            // [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                            // [{ font: [] }], // 字体种类
                            // [{ align: [] }], // 对齐方式
                            // ["clean"], // 清除文本格式
                        ]
                    }
                },
                fileUrllist: [],  //change   url数组
                filefIdList: [],  //上传成功  id数组
                fileAllUrlList: [],  //上传成功  url数组
                filelist: [],  //项目截图  arr
                delarr: [],  //需要删除的图片id  arr
            }
        },
        methods: {
            init(){

                var _this = this;
                
                this.selectOpt(6);  //担任角色
                this.selectOpt(4);  //应用技术

                if(this.$route.query.type == 2){  //编辑项目案例

                    this.$httpGet('/api/index/personal_center/caseDeatail',{'cp_uid': window.localStorage.uid,'cp_id': this.$route.query.cpid}).then(response => {

                        if(response.code == 200){

                            _this.detailData = response.msg;
                            _this.form.cp_name = response.msg.cp_name;
                            if(response.msg.cp_cycle == 0){
                                _this.form.cp_cycle = '';
                            }else{
                                _this.form.cp_cycle = response.msg.cp_cycle;
                            }
                            if(response.msg.cp_technology == 0){
                                _this.form.cp_technology_arr = [];
                            }else{
                                _this.form.cp_technology_arr = response.msg.cp_technology.split(',');
                            }
                            _this.form.cp_role_arr = response.msg.cp_role.split(',');
                            _this.form.cp_content = response.msg.cp_content;
                            _this.form.cp_look_address = response.msg.cp_look_address;

                            let idarr = response.msg.cp_photo.split(',');
                            for(var i=0;i<response.msg.cp_photo_name.length;i++){
                                _this.filelist.push({'id': idarr[i], 'url': response.msg.cp_photo_name[i]});
                            }

                        }else{
                            this.$message({
                                message: response.msg,
                                type: 'warning'
                            });
                        }

                    });
                }
            },
            //下拉列表
            selectOpt(type){
                var _this = this;
                // 获取下拉
                this.$httpGet('/api/index/Skilltype/getSkillForStatus',{'st_type': type}).then(response => {

                    if(response.code == 200){

                        if(type == 4){  //应用技术
                            _this.skillOpt = response.msg;
                        }else if(type == 6){  //担任角色
                            _this.workOpt = response.msg;
                        }
                    }

                });
            },
            uploadUrl(){
                let url = '/api/index/Feedback/uploadImgs';
                return url;
            },
            //自定义上传
            uploadSectionFile(file){
                
                var _this = this;

                const formData = new FormData();
                formData.append('files', file.file);
                formData.append('uid', window.localStorage.uid);
                
                this.$httpPost('/api/index/Feedback/uploadImgs',formData).then(response => {

                    if(response.code == 200){

                        this.$message({
                            message: response.msg,
                            type: 'success'
                        });
                        file.onSuccess(response.fid);

                    }else if(response.code == 301){
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                        _this.$refs.upload.clearFiles();
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //移除
            handleRemove(file, fileList) {
                
                var _this = this;

                var sub = this.fileAllUrlList.indexOf(file.url);  //下标
                if(sub != -1){
                    //请求接口  删除文件
                    _this.delpic(this.filefIdList[sub]);
                    _this.fileAllUrlList.splice(sub,1);
                    _this.filefIdList.splice(sub,1);

                }else{  //编辑页   删除该项目原始图片
                    
                    for(var i=0;i<_this.filelist.length;i++){
                        if(_this.filelist[i].id == file.id){
                            
                            _this.delarr.push(_this.filelist[i].id);
                            
                        }
                    }
                }

            },
            //删除图片
            delpic(picid){
                this.$httpPost('/api/index/Feedback/delFile',{'fid': picid}).then(response => {

                    if(response.code == 200){

                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //上传成功
            uploadSuccess(response, file, fileList){
                
                this.filefIdList = [];
                this.fileAllUrlList = [];
                for(var i=0;i<fileList.length;i++){
                    
                    if(fileList[i].response){
                        this.filefIdList.push(fileList[i].response);
                        this.fileAllUrlList.push(fileList[i].url);
                    }
                }
                
            },
            //change
            uploadChange(file,fileList){
                
                this.fileUrllist = [];
                for(var i=0;i<fileList.length;i++){
                    this.fileUrllist.push(fileList[i].url);
                }
                
            },
            //提交表单
            onSubmit(formName){

                var _this = this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        
                        let data = {};
                        if(_this.$route.query.type == 1){  //新增
                            data.cp_id = '';
                        }else if(_this.$route.query.type == 2){  //编辑
                            data.cp_id = _this.$route.query.cpid;
                        }
                        data.cp_uid = window.localStorage.uid;
                        data.cp_name = _this.form.cp_name;
                        data.cp_cycle = _this.form.cp_cycle;
                        data.cp_role = _this.form.cp_role_arr.join();
                        data.cp_technology = _this.form.cp_technology_arr.join();
                        data.cp_content = _this.form.cp_content;
                        data.cp_look_address = _this.form.cp_look_address;
                        //添加  初始项目截图id
                        for(let i=0;i<_this.filelist.length;i++){
                            _this.filefIdList.push(_this.filelist[i].id);
                        }

                        //删除    已删除的项目截图id
                        for(let i=0;i<_this.delarr.length;i++){
                            //请求接口  删除文件
                            _this.filefIdList.splice(_this.filefIdList.indexOf(_this.delarr[i]),1);
                            _this.delpic(_this.delarr[i]);
                        }
                        
                        data.cp_photo = _this.filefIdList.join();
                        this.$httpPost('/api/index/Personal_center/addOrUpdateCase',data).then(response => {

                            if(response.code == 200){

                                this.$message({
                                    message: response.msg,
                                    type: 'success'
                                });

                                setTimeout(function(){
                                    _this.$router.push({
                                        path: '/itemcase',
                                    })
                                },2000);

                            }else{
                                this.$message({
                                    message: response.msg,
                                    type: 'warning'
                                });
                            }

                        });

                    }else {
                        console.log('error submit!!');
                        return false;
                    }
                })
                
            },
        },
        mounted(){
            this.init();
        },
    }
</script>
<style lang="less">
    .ql-editor {
        min-height: 270px !important;
        line-height: 26px;
        color: #222222;
    }
    .ql-snow .ql-picker-label::before{
        vertical-align: top;
    }
</style>
